<template>
  <div class="food">
    <top></top>
    <div class="food1">
        <div class="food2">
            <div class="food3">
                <div style="width:50px">名称:</div>
                <el-input v-model="search.name" placeholder="请输入美食名称"></el-input>
            </div>
            <div class="food3">
                <div style="width:100px">美食类型:</div>
                <el-select clearable v-model="search.typeId" placeholder="请选择美食类型">
                    <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <el-button icon="el-icon-search" style="margin-left:10px;font-family:'黑体'" type="primary" @click="toSearch">搜索</el-button>
        </div>
    </div>
    <div class="index10 food4">
      <div class="index11 food5">
        <div class="index27 food7">
          <el-empty v-if="tableData.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
          <div v-if="tableData.length > 0" class="index26 food6" v-for="(item,index) in tableData" @click="toInfo(item.id)">
            <div class="index28">
              <img :src="item.image.split(',')[0]">
              <div class="index17" @click.stop="saveFoodFavor(item.id)">
                <i style="color:#DC3545" class="el-icon-star-off"></i>
              </div>
              <div class="index18">
                <i class="el-icon-star-off"></i> ({{item.favor}}+)
              </div>
              <div class="index19">
                {{index + 1}}
              </div>
            </div>
            <div class="index29">
              <div class="index30">
                <div class="index31">{{item.name}}</div>
                <div class="index32">
                  <el-rate disabled v-model="item.star"></el-rate>
                </div>
                <div class="index32">营业时间:{{item.open}}</div>
                <div class="index25">{{item.comment}}<i class="el-icon-s-comment"></i></div>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="search.pageSize"
          :current-page="search.pageNumber"
          @current-change="handleCurrentChange"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {saveFoodFavor,getFoodTypeList,getFoodListPage} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    data() {
      return{
        search: {
            schoolId: "",
            name: "",
            typeId: "",
            pageNumber: 1,
            pageSize:12,
            state: 1,
        },
        options: [],
        total: 0,
        tableData: []
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      saveFoodFavor(id) {
        var param = {
          listId: id
        }
        saveFoodFavor(param).then(res => {
          if (res.code == 1000) {
            this.$message({
              message: "收藏成功",
              type: 'success'
            });
            this.getFoodListPage()
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })
      },
      toSearch() {
        this.search.pageNumber = 1
        this.getFoodListPage()
      },
      toInfo(id) {
        this.$router.push("foodInfo?id=" + id)
      },
      getFoodTypeList() {
        getFoodTypeList().then(res => {
          if (res.code == 1000) {
            this.options = res.data
          }
        })
      },
      handleCurrentChange(val) {
        this.search.pageNumber = val
        this.getFoodListPage()
      },
      getFoodListPage() {
        getFoodListPage(this.search).then(res => {
          if (res.code == 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      var user = JSON.parse(window.localStorage.getItem("user_info"))
      this.search.schoolId = user.schoolId
      var typeId = this.$route.query.typeId
      if (typeId) {
        this.search.typeId = typeId
      }
      var name = this.$route.query.name
      if (name) {
        this.search.name = name
      }
      this.getFoodTypeList()
      this.getFoodListPage()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/food.css');
@import url('../../assets/css/index.css');
.food3>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>